<template>
  <div>
    <el-card class="box-card">
      <el-steps :space="500" :active="active" finish-status="success">
        <el-step title="注意事项"></el-step>
        <el-step title="工具选择"></el-step>
        <el-step title="条件输入"></el-step>
        <el-step title="计算数值"></el-step>
        <el-step title="选型结果"></el-step>
      </el-steps>
    </el-card>

    <el-card class="box-card">
      <h2>砂轮电机计算</h2>
      <el-form :inline="true" :model="dianJi" class="custom-form">
        <el-form-item
            v-for="(item,index) in dianJiItems"
            :key="item.id"
            :label="item.label"
            :label-width="item.labelWidth"
        >
          <el-input
              v-model.number="dianJiItems[item.model]"
              :placeholder=item.label
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <h2>砂轮轴的一阶临界转速</h2>
      <el-form :inline="true" :model="zhuanSu" class="custom-form">

        <h3>阶梯轴直径</h3>
        <el-form-item
            v-for="(item) in zhuanSuItems.zhiJingItem"
            :key="item.id"
            :label="item.label"
            :label-width="item.labelWidth">
          <el-input
              v-model.number="zhuanSuItems.zhiJingItem[item.model]"
              :placeholder=item.label
          ></el-input>
        </el-form-item>

        <h3>阶梯的长度</h3>
        <el-form-item
          v-for="(item) in zhuanSuItems.longItem"
          :key="item.id"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-input
              v-model.number="zhuanSuItems.longItem[item.model]"
              :placeholder=item.label
          ></el-input>
        </el-form-item>

        <h3>修正系数ξ</h3>
        <el-form-item
            v-for="(item) in zhuanSuItems.xiShuItem"
            :key="item.id"
            :label="item.label"
            :label-width="item.labelWidth"
        >
          <el-input
              v-model.number="zhuanSuItems.xiShuItem[item.model]"
              :placeholder=item.label
          ></el-input>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Zhangpuhe",
  data() {
    return {
      active: 2,
      dianJi: {
        xianSuDu: '', //线速度
        zhiJing: '', //砂轮直径
        zhuanSu: '', //砂轮转速
        zhongLiang: '',//砂轮和轴重量
        niuJu: '', //扭矩
        gongLv: '',//电机功率
        xiShu: 1.5,//安全系数
        result: ''//结果值
      },
      dianJiItems: [
        { id: 1, label: '砂轮线速度:', model: 'dianJi.xianSuDu', labelWidth: '100px' },
        { id: 2, label: '砂轮直径:', model: 'dianJi.zhiJing', labelWidth: '100px' },
        { id: 3, label: '砂轮转速 n=v/pi*d:', model: 'dianJi.zhuanSu', labelWidth: '180px' },
        { id: 4, label: '砂轮和轴重量:', model: 'dianJi.zhongLiang', labelWidth: '100px' },
        { id: 5, label: '扭矩 T=FL:', model: 'dianJi.niuJu', labelWidth: '100px' },
        { id: 6, label: '电机功率 P=n*T/9500:', model: 'dianJi.gongLv', labelWidth: '180px' },
        { id: 7, label: '安全系数默认1.5:', model: 'dianJi.xiShu', labelWidth: '180px' },
        { id: 8, label: '结果值:', model: 'dianJi.result', labelWidth: '100px' },
      ],

      zhuanSu: {
        d1: null,
        d2: null,
        d3: null,
        d4: null,
        d5: null,
        L1: null,
        L2: null,
        L3: null,
        L4: null,
        L5: null,
        qcL: null, //全长L
        zdjjl: null, //支点间距离
        xiShu: null, //修正系数
      },

      zhuanSuItems: {
        zhiJingItem: [
          { id: 1, label: 'd1:', model: 'zhuanSu.d1', labelWidth: '20px' },
          { id: 2, label: 'd2:', model: 'zhuanSu.d2', labelWidth: '20px' },
          { id: 3, label: 'd3:', model: 'zhuanSu.d3', labelWidth: '20px' },
          { id: 4, label: 'd4:', model: 'zhuanSu.d4', labelWidth: '20px' },
          { id: 5, label: 'd5:', model: 'zhuanSu.d5', labelWidth: '20px' },
        ],
        longItem: [
          { id: 6, label: 'L1:', model: 'zhuanSu.L1', labelWidth: '20px' },
          { id: 7, label: 'L2:', model: 'zhuanSu.L2', labelWidth: '20px' },
          { id: 8, label: 'L3:', model: 'zhuanSu.L3', labelWidth: '20px' },
          { id: 9, label: 'L4:', model: 'zhuanSu.L4', labelWidth: '20px' },
          { id: 10, label: 'L5:', model: 'zhuanSu.L5', labelWidth: '20px' },
          { id: 11, label: '全长L:', model: 'zhuanSu.qcL', labelWidth: '80px' },
          { id: 12, label: '支点间距离:', model: 'zhuanSu.zdjjl', labelWidth: '100px' },
        ],
        xiShuItem: [
          { id: 13, label: '修正系数:', model: 'zhuanSu.xiShu', labelWidth: '100px' },
        ]
      },
    };
  },
  computed: {

  },
  watch: {
    dianJi: {
      handler() {
        this.calculateResult();
      },
      deep: true,
    },
  },
  methods: {
    //计算结果
    calculateResult() {
      this.dianJi.zhuanSu = this.dianJi.xianSuDu * 1000 * 60 / Math.PI / 125;
      this.dianJi.niuJu = this.dianJi.zhongLiang * 9.8 * this.dianJi.zhiJing / 2 / 1000;
      this.dianJi.gongLv =  this.dianJi.zhuanSu * this.dianJi.niuJu  / 9550;
      this.dianJi.result = this.dianJi.gongLv * this.dianJi.xiShu;
    },
  },
}
</script>

<style scoped>
.box-card {
  margin: 10px;
  max-height: calc(100vh - 20px); /* 限制高度，确保不会超出视窗 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>